<template>
  <header>
    <div class="tool-bar">
      <ul class="container nav">
        <li v-for="tool in tools" :key="tool.icon">
          <a class="hover-toggle-handler" v-if="tool.text">
            <i class="ucai-icon" :class="'ucai-icon-' + tool.icon"></i>&nbsp;{{tool.text}}
            <div class="hover-warp">
              <div class="hover-block">
                <div class="hover-text">
                  <img :src="tool.img" alt="">
                </div>
                <div class="hover-text" v-if="tool.img_text">{{tool.img_text}}</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class=" menu-bar">
      <div class="container">
      <div class="logo">
        <img src="/static/images_pc/site/logo.png" :alt="site">
        <span>{{site}}优采平台</span>
      </div>
      <ul class="nav">
        <li><a href="">关于我们</a></li>
        <li><a href="">供应商入驻</a></li>
      </ul>
    </div>
    </div>
  </header>
</template>
<script>
export default {
  name: 'login-header',
  data() {
    return {
      site: '',
      tools: [{
        text: '下载手机客户端',
        icon: 'shouji1',
        img: '',
        img_text: '扫描下载客户端'
      },{
        text: '关注优采平台',
        icon: 'weixin-copy',
        img: '',
      },{
        text: '',
        icon: 'dianhua1',
        img: '',
        img_text: '扫一扫微信咨询'
      }]
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@style_pc/basic/index';
@header-tool-h: 30px;
@header-menu-h: 50px;
.hover-toggle-handler {
    position: relative
}

.hover-toggle-handler .hover-warp {
    position: absolute;
    display: none;
    left: 0;
    top: 100%;
    padding-top: 5px;
    z-index: 100;
    cursor: default
}

.hover-toggle-handler:hover .hover-warp {
    display: block
}

.hover-toggle-handler .hover-block {
    min-width: 130px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8e8e8;
    line-height: initial;
    color: #333!important
}

.hover-toggle-handler .hover-block .hover-text {
    margin: 5px
}

.hover-toggle-handler.hover-right .hover-warp {
    left: 100%;
    top: 0;
    padding-top: 0;
    padding-left: 5px
}

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 2px 2px 2px #f1f1f1;
 
  .nav {
    text-align: right;
    li {
      display: inline-block;
      font-size: 14px;
      a {
        display: block;
        padding: 0 15px;
        text-decoration: none;
      }
    }
  }
  .tool-bar {
    background: #f4f4f4;
    height: 30px;
    line-height: 30px;
    a {
      color: #666!important;
      transition: all .4s ease-out;
      &:hover {
        background: #fff;
      }
    }
    i {
      vertical-align: middle;
      font-size: 120%;
      color: #999;
    }
  }
  .menu-bar {
    background: #fff;
    height: @header-menu-h;
    line-height: @header-menu-h;

    .nav a {
      padding: 0 25px;
      font-size: 16px;
    }
  }
  .logo {
    float: left;
    font-size: 22px;
    color: #000;

    &>* {
      display: inline-block;
    }

    img {
      width: @header-menu-h - 15;
      height: @header-menu-h - 15;
      margin-right: 10px;
    }
  }
  .container {
    width: 1200px;
    margin: 0 auto;
  }

}
.blue-bar .menu-bar {
  background: @gradient-main;
  color: white;
  & * {
    color: white!important;
  }
  .logo {
    img {
      width: 30px;
      height: 30px;
      padding: 5px;
      background-color: @white;
      border-radius: 5px;
    }
  }
}
</style>